@charset "utf-8";
/* CSS Document */

/*

	ICERRR - default css
	This css is targeted at phones (~320 x ~480), tablets will be targeted with media queries and additional css files
	Also: landscape...
	
	Notes:
	* Palettes
	   * http://www.colourlovers.com/business/trends/branding/7880/Papeterie_Haute-Ville_Logo
	
*/

/* -- FONTS */

body, table, input, select {
	font-family: 'Roboto', sans-serif;
	font-size:12pt;
	color:rgba(0,0,0,0.87);
}

/* -- ELEMENTS */

* {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

html { 
	overflow:hidden;
	width:100%; 
	height:100%; 
	}

body {
	overflow:hidden; 
	width:100%; 
	height:100%; 
	margin:0;
	padding:0;
	background-color:#eee;
}

a {
	color:#999;
	text-decoration:none;
}

	a:hover {
		text-decoration:underline;
	}
	
h1 {
	font-size:32pt;
	font-weight:200;
}
	
label {
	margin-left:8px;
}

input,select {
	width:98%;
	margin:-1px;
	padding:1%;
	font-size:16pt;
	background:#fff;
	border:1px solid rgba(0,0,0,0.5);
}

select {
	width:100%;
	margin:0;
}

input[type="checkbox"] {
	width:24px;
	height:24px;
	margin-top:8px;
}

/*
select {
	margin:0; 
	padding:5px;
	background:#fff;
}
/**/

/* -- SECTIONS */

/* Common */

section {
	overflow:hidden;
	display:none;
	position:absolute;
	top:0; left:0; right:0; bottom:0;
	width:100%;
	height:100%;
	background:#eee;
}

	.actionbar {
		z-index:3;
		position:absolute;
		top:0; left:0; right:0;
		width:100%;
		height:56px;
		background-color:#2D6073; /* #61AE24; */
	}
	
		.actionbar .icon_app {
			position:absolute;
			top:0; left:0;
			width:24px; /* note: icon should include 4px padding on all sides! */
			height:24px;
			padding:16px;
		}
		
			.actionbar .icon_app img {
				width:24px; height:24px;
			}
		
		.actionbar .title {
			position:absolute;
			bottom:14px; left:56px;
			font-size:16pt;
			xfont-weight:300;
			color:#D0D102;
		}
		
		.actionbar .actions {
			position:absolute;
			top:0; right:0;
			height:56px;
		}
		
			.actionbar .actions .action {
				float:right;
				width:24px;
				height:24px;
				margin-left:4px;
				padding:16px;
			}
			
				.actionbar .actions .action img {
					width:24px; height:24px;
				}
				
	.tabbar {
		z-index:2;
		position:absolute;
		top:56px; left:0; right:0;
		width:100%;
		height:48px;
		background-color:#616161;
		color:rgba(255,255,255,0.87);
		text-transform:uppercase;
	}
	
		.tab {
			float:left;
			width:50%;
			height:48px;
		}
		.tab.active {
			background:rgba(0,0,0,0.25);
		}
		
		.tab_sep {
			float:left;
			width:2%;
			height:48px;
			background:rgba(0,0,0,0.25);
		}
	
	.main {
		z-index:1;
		overflow:auto;
		position:relative;
		top:56px; left:0; right:0;
		width:100%;
		xheight:*; /* TODO: smart way to set height dynamically so it uses all available space? */
		border:-1px solid #f00;
	}
		
		.main .block {
			
		}

			.main .block.header {
				font-size:18pt;
				font-weight:300;
				padding-left:8px;
			}
	
	.footer {
		z-index:2;
		position:absolute;
		bottom:0; left:0; right:0;
		width:100%;
		height:56px;
		background-color:#616161;
		transition:top 1000ms;
	}
	
		.footer .button {
			width:33.3%;
			height:56px;
			color:rgba(255,255,255,0.87);
		}
		
		.footer .button.active {
			background-color:rgba(0,0,0,0.25);
		}
		
		.footer .button.busy {
			background-color:rgba(0,0,0,0.25);
			opacity:0.5;
		}
		
		.footer .button.left {
			position:absolute;
			left:0; top:0;
		}
		
		.footer .button.center {
			position:absolute;
			left:33.34%; top:0;
		}
		
		.footer .button.right {
			position:absolute;
			right:0; top:0;
		}
		
		.footer .button_inner {
			position:absolute;
			width:100%; height:24px;
			padding:16px 0 16px 0;
		}
		
		.footer .button_inner img {
			width:40px;
			height:40px;
			margin:-8px 0 0 0;
		}

/* Specific */

#splash {
	display:block;
}

	#splash img {
		width:256px; height:256px;
	}

#install {
	
}

	#install .main .log {
		padding:16px;
		font-size:10pt;
		color:rgba(0,0,0,0.54);
	}
	
	#install .main .log span.e {
		color:#f00;
	}

#firstlaunch {

}

#home {
	
}

	#home .main {
		background-position:center;
		background-size:cover;
		background-repeat:no-repeat;
	}
	
	#home .main .station_image {
		width:256px; 
		height:256px;
		margin:48px auto 0 auto;
	}
	
	#home .main .station_image_wrap {
		width:256px; 
		height:256px;
		margin:-8px 0 0 -8px;
		padding:8px;
		background-color:#fff;
	}
	
	#home .main .station_image img {
		width:256px;
		max-height:256px;
		margin:0;
		padding:0;
	}
	
	#home .main .station_name {
		width:300px;
		margin:32px auto 0 auto;
		text-align:center;
		font-size:24pt; 
		font-weight:300;
		text-transform:capitalize;
	}
	
	#home .main .station_nowplaying {
		width:300px;
		margin:16px auto 0 auto;
		text-align:center;
	}

#channellist {
	
}

	#channellist .main {
		top:104px;
	}
	
	/* TODO: Fow now let's keep this universal? */
	
	.resultheader {
		position:relative;
		top:0; left:0; right:0;
		height:16px;
		padding:16px;
		border-bottom:1px solid #ccc;
		text-transform:uppercase;
	}
	
	.resultitem {
		float:left;
		position:relative;
		width:100%;
		height:72px;
		border-bottom:1px solid #ccc;
	}
	
	.resultitem .resulticon {
		position:absolute;
		top:0; left:0;
		width:40px; 
		height:40px;
		padding:16px;
	}
	
	.resultitem .resultname {
		position:absolute;
		bottom:22px; left:72px;
		font-size:16pt;
	}
	
	.resultitem .resultstar {
		position:absolute;
		top:0; right:0;
		width:24px;
		height:24px;
		padding:24px;
	}
	
	.resultitem .resultstarred {
		
	}
	
	.resultfooter {
		/* for credits, powered by ... */
		position:fixed;
		right:0; left:0; bottom:0;
		padding:16px;
		background:#eee;
		text-align:center;
		font-size:10pt;
	}
	
#editstation, #searchstation, #searchstation_results {
	
}

	#editstation .block, #searchstation .block, #alarms_add .block {
		padding:16px 16px 0 16px;
	}
	
	#editstation .block label a, #searchstation .block label a, #alarms_add .block label a {
		float:right;
	}
	
	#editstation img.station_icon, #searchstation img.station_icon {
		width:48px; height:48px;
	}
	
	#editstation .block .button, #searchstation .block .button {
		
	}
	
#searchstation_results {

}
	
	#searchstation_results  .resultitem .resultname, 
	#alarms .resultitem .resultname {
		position:absolute;
		top:16px; left:72px;
		font-size:12pt;
	}
	
	#searchstation_results .resultitem .resultsub, 
	#alarms .resultitem .resultsub {
		position:absolute;
		bottom:16px; left:72px;
		font-size:10pt;
	}
	
#searchicon {

}

	#searchicon .main {
		padding-bottom:48px;
	}
	
		.resultwrap_chicon {
			margin:auto;
			padding:10px;
		}
	
		.resultitem_chicon {
			float:left;
			width:80px;
			height:80px;
			margin:5px;
			padding:5px;
			background:#fff;
			overflow:hidden;
		}
	
			.resulticon_chicon {
				width:100%;
			}
			
	#searchicon .main .gsc-branding {
		position:fixed;
		right:0; left:0; bottom:0;
		padding:16px;
		background:#eee;
		text-align:center;
		font-size:10pt;
	}

/* Alarms */
	
#alarms {

}

#alarms_add {

}

	#alarms_add label {
		padding-bottom:16px; 
	}
	
/* -- OVERFLOW_MENU */

.overflow_menu {
	display:none;
	position:absolute;
	z-index:80;
	top:4px; right:4px;
	width:240px;
	margin:-1px;
	background:rgba(255,255,255,1);
	border:1px solid #ccc;
}

	.overflow_menu .menu_item {
		position:relative;
		width:100%;
		height:48px;
		border-bottom:1px solid #ccc;
	}

/* -- OVERLAYS */

/* Common */

.overlay_wrap {
	z-index:90; /* high zindex */
	display:none;
	position:absolute;
	top:0; left:0; right:0; bottom:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.5);
	font-size:24pt;
	font-weight:300;
	color:#fff;
}

	.overlay_wrap
	
/* Specific */

#loading.overlay_wrap {
	
}

#dialog.overlay_wrap {
	
}

/* Other */

#overlay_toast {
	z-index:99;
	display:none;
	position:absolute;
	left:32px; right:32px; bottom:72px;
	height:auto;
	padding:16px;
	color:rgba(255,255,255,0.87);
	background-color:rgba(0,0,0,0.5);
	pointer-events:none;
}

/* -- COMMON */

/* Center tools */
	
.center_table {
	display:table;
	width:100%;
	height:100%;
}

.center_td {
	display:table-cell;
	width:100%; height:100%;
	text-align:center;
	vertical-align:middle;
}

/* Round */


.roundedCorners2, .round2 {
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	}

.roundedCorners4, .round4 {
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	}

/* Shadow */

.textshadow25 {
	text-shadow: 2px 2px rgba(0, 0, 0, 0.25);
	}
	
.shadow_z1 {
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
}

.shadow_z2 {
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
}

.shadow_z3 {
	box-shadow: 0px 3px 6px rgba(0, 0, 0, .5);
}

.shadow_z4 {
	box-shadow: 0px 4px 8px rgba(0, 0, 0, .5);
}

.shadow_z5 {
	box-shadow: 0px 5px 10px rgba(0, 0, 0, .5);
}
	
.shadow_z1u {
	box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.5);
}

.shadow_z2u {
	box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.5);
}

.shadow_z3u {
	box-shadow: 0px -3px 6px rgba(0, 0, 0, .5);
}

.shadow_z4u {
	box-shadow: 0px -4px 8px rgba(0, 0, 0, .5);
}

.shadow_z5u {
	box-shadow: 0px -5px 10px rgba(0, 0, 0, .5);
}
	
.shadowInset {
	-moz-box-shadow:    inset 0 0 10px rgba(0,0,0,0.5);
	-webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
	box-shadow:         inset 0 0 10px rgba(0,0,0,0.5);
}

/* Selectable */

* {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor:default;
}

.selectable, p, input, textarea {
	-webkit-touch-callout: text;
	-webkit-user-select: text;
	-khtml-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text;
	cursor:text;
}

/* Activatable */

/* TODO: FIXME: having issues with :active when elem is hidden while :active
http://stackoverflow.com/questions/25338174/android-webview-active-stays-on-when-elem-is-hidden-while-it-is-active
*/

.activatablel_active {
	background-color:rgba(208,209,2,0.25);
}
.activatabled_active {
	background-color:rgba(50,116,44,0.25);
}

/* Hoverable */

.hoverablel:hover {
	background-color:rgba(208,209,2,0.25);
}

.hoverabled:hover {
	background-color:rgba(50,116,44,0.25);
}